<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07-结构伪类选择器-nth-child</title>
  <style>
    /* 隔行变色 */
    /* 1. 把所有ul的偶数孩子选出来 */
    ul li:nth-child(even) {
      background-color: #ccc;
    }

    /* 2. 把所有ul的奇数孩子选出来 */
    ul li:nth-child(odd) {
      background-color: gray;
    }


    /* 3. nth-child(n) 从0开始 每次+1 一直往后计算(参数必须是n) */
    /* 
    0开始 没有0 忽略 
    一直找到第9个 没有9 忽略 结束 
    意思就是将所有li选中
    */
    /* ol li:nth-child(n) {
      background-color: pink;
    } */

    /* 4. nth-child(2n) 从0开始 每次+2 一直往后计算 */
    /* 意思就是选择偶数li */
    /* ol li:nth-child(2n) {
      background-color: green;
    } */

    /* 5. nth-child(2n+1) 从1开始 每次+2 一直往后计算 */
    /* 意思就是选择奇数li */
    /* ol li:nth-child(2n+1) {
      background-color: skyblue;
    } */

    /* 6. nth-child(n+3) 从0+3开始 每次-1 一直往后计算 */
    /* 意思就是选择3以后(包括3)的li标签 */
    /* ol li:nth-child(n+3) {
      background-color: skyblue;
    } */

    /* 7. nth-child(-n+5) 从0+5开始 每次-1 一直往后计算 */
    /* 意思就是选择5(包括5)之前的li标签 */
    ol li:nth-child(-n+5) {
      background-color: skyblue;
    }

    
  </style>
</head>

<body>

  <ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
    <li>我是第7个孩子</li>
    <li>我是第8个孩子</li>
  </ul>

  <ol>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
    <li>我是第7个孩子</li>
    <li>我是第8个孩子</li>
  </ol>

</body>

</html>